<!DOCTYPE html>
<html>
<head>
<title>D3 Hero Panel</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="jquery/jquery.mobile-1.1.1.css" />
<link rel="stylesheet" href="css/d3.css" />
<script src="jquery/jquery-1.7.1.min.js"></script>
<script src="jquery/jquery.mobile-1.1.1.min.js"></script>
<script src="js/d3.js"></script>
</head>
<body>
<!-- page : Classes-->
<div id="pgCls" data-role="page">
    <!-- header -->
    <div data-role="header">
        <h1>D3 Hero Panel</h1>
    </div>
    <!-- content -->
    <div data-role="content">
       <div class="content-primary">
                <ul data-role="listview">
                    <li data-role="list-divider"><h2>请选择职业</h2></li>
                    <li><a href="#pgAtrr">野蛮人</a></li>
                    <li><a href="#pgAtrr">武僧</a></li>
                    <li><a href="#pgAtrr">巫医</a></li>
                    <li><a href="#pgAtrr">秘法师</a></li>
                    <li><a href="#pgAtrr">魔猎人</a></li>
                </ul>
        </div>
    </div>
</div>
<!-- page : Attribute-->
<div id="pgAtrr" data-role="page">
    <!-- header -->
    <div data-role="header" data-position="fixed">
        <h1>D3 Hero Panel</h1>
        <a href="#pgCls" data-icon="home" data-iconpos="notext" data-direction="reverse">Home</a>
        <!-- bar -->
        <div data-role="navbar">
            <ul>
                <li><a href="#pgAtrr" class="ui-btn-active ui-state-persist">属性</a></li>
                <li><a href="#pgEqu">装备</a></li>
                <li><a href="#pgSkill">技能</a></li>
            </ul>
        </div>
    </div>
    <!-- content -->
    <div data-role="content">
        <ul data-role="listview" data-theme="c">
            <li data-role="list-divider">人物属性</li>
            <li><span>力量</span><span class="ui-li-right">890</span></li>
            <li><span>敏捷</span><span class="ui-li-right">526</span></li>
            <li><span>智力</span><span class="ui-li-right">2024</span></li>
            <li><span>體能</span><span class="ui-li-right">100</span></li>
            <li data-theme="b"><span>護甲值</span><span class="ui-li-right">1100</span></li>
            <li data-theme="b"><span>傷害</span><span class="ui-li-right">35800</span></li>
            <li data-role="list-divider">攻擊</li>
            <li><span>智力傷害加成</span><span class="ui-li-right">1000%</span></li>
            <li><span>技能傷害加成</span><span class="ui-li-right">15%</span></li>
            <li><span>每秒攻擊次數</span><span class="ui-li-right">1.8</span></li>
            <li><span>暴擊幾率</span><span class="ui-li-right">5.0%</span></li>
            <li><span>暴擊傷害</span><span class="ui-li-right">50%</span></li>
            <li data-role="list-divider">防禦</li>
            <li><span>格擋值</span><span class="ui-li-right">1000%</span></li>
            <li><span>格擋幾率</span><span class="ui-li-right">15%</span></li>
            <li><span>閃避幾率</span><span class="ui-li-right">1.8</span></li>
            <li><span>傷害減免</span><span class="ui-li-right">5.0%</span></li>
            <li><span>物理抗性</span><span class="ui-li-right">50%</span></li>
            <li><span>冰寒抗性</span><span class="ui-li-right">1000%</span></li>
            <li><span>火焰抗性</span><span class="ui-li-right">15%</span></li>
            <li><span>電擊抗性</span><span class="ui-li-right">1.8</span></li>
            <li><span>毒素抗性</span><span class="ui-li-right">5.0%</span></li>
            <li><span>秘法、神聖抗性</span><span class="ui-li-right">50%</span></li>
            <li><span>控場減免</span><span class="ui-li-right">15%</span></li>
            <li><span>遠程傷害減免</span><span class="ui-li-right">1.8</span></li>
            <li><span>近戰傷害減免</span><span class="ui-li-right">5.0%</span></li>
            <li><span>荊刺傷害</span><span class="ui-li-right">50%</span></li>
            <li data-role="list-divider">生命</li>
            <li><span>生命值上限</span><span class="ui-li-right">1000%</span></li>
            <li><span>總生命值加成</span><span class="ui-li-right">15%</span></li>
            <li><span>每秒生命恢復</span><span class="ui-li-right">1.8</span></li>
            <li><span>生命竊取</span><span class="ui-li-right">5.0%</span></li>
            <li><span>擊殺生命恢復</span><span class="ui-li-right">50%</span></li>
            <li><span>擊中生命恢復</span><span class="ui-li-right">1000%</span></li>
            <li><span>生命之球效果加成</span><span class="ui-li-right">15%</span></li>
            <li><span>拾取距離加成</span><span class="ui-li-right">1.8</span></li>
            <li data-role="list-divider">人物能量</li>
            <li><span>秘能上限</span><span class="ui-li-right">1.8</span></li>
            <li><span>每秒秘能恢復</span><span class="ui-li-right">1.8</span></li>
        </ul>
    </div>
</div>
<!-- page : Equipment-->
<div id="pgEqu" data-role="page">
    <!-- header -->
    <div data-role="header" data-position="fixed">
        <h1>D3 Hero Panel</h1>
        <a href="#pgCls" data-icon="home" data-iconpos="notext" data-direction="reverse">Home</a>
        <!-- bar -->
        <div data-role="navbar">
            <ul>
                <li><a href="#pgAtrr">属性</a></li>
                <li><a href="#pgEqu" class="ui-btn-active ui-state-persist">装备</a></li>
                <li><a href="#pgSkill">技能</a></li>
            </ul>
        </div>
    </div>
    <!-- content -->
    <div data-role="content">
        <div data-role="collapsible" data-theme="e" data-content-theme="e" data-mini="true">
            <h3>主手</h3>
            <ul data-role="listview" data-inset="true">
                <li data-icon="arrow-d">
                    <a><h3>符文劍</h3>
                       <h3>伤害: 1024.0  (1024-1024)</h3>
                       <p class="ui-li-aside">攻速： 1.0</p></a>
                    <a data-theme="e">re</a>
                </li>
                <li class="d3-color-blue">+286 - 381 点傷害</li>
                <li class="d3-color-blue">爆擊傷害提高 100%</li>
                <li class="d3-color-blue">攻擊速度提高 11%</li>
                <li class="d3-color-blue">+50% 傷害</li>
                <li data-icon="plus"><a href="#pgAfx">添加詞綴</a></li>
            </ul>
        </div>
        <div data-role="collapsible" data-theme="b" data-content-theme="b" data-mini="true">
           <h3>副手</h3>
           <ul data-role="listview" data-inset="true">
                <li data-icon="arrow-d">
                    <a><h3>未装备</h3></a>
                    <a data-theme="c">re</a>
                </li>
            </ul>
        </div>
        <div data-role="collapsible" data-theme="c" data-content-theme="c" data-mini="true">
           <h3>頭部</h3>
           <ul data-role="listview" data-inset="true">
                <li data-icon="arrow-d">
                    <a><h3>未装备</h3></a>
                    <a data-theme="c">re</a>
                </li>
            </ul>
        </div>
        <div data-role="collapsible" data-theme="c" data-content-theme="c" data-mini="true">
           <h3>肩膀</h3>
           <ul data-role="listview" data-inset="true">
                <li data-icon="arrow-d">
                    <a><h3>未装备</h3></a>
                    <a data-theme="c">re</a>
                </li>
            </ul>
        </div>
        <div data-role="collapsible" data-theme="c" data-content-theme="c" data-mini="true">
           <h3>身軀</h3>
           <ul data-role="listview" data-inset="true">
                <li data-icon="arrow-d">
                    <a><h3>未装备</h3></a>
                    <a data-theme="c">re</a>
                </li>
            </ul>
        </div>
        <div data-role="collapsible" data-theme="c" data-content-theme="c" data-mini="true">
           <h3>手腕</h3>
           <ul data-role="listview" data-inset="true">
                <li data-icon="arrow-d">
                    <a><h3>未装备</h3></a>
                    <a data-theme="c">re</a>
                </li>
            </ul>
        </div>
        <div data-role="collapsible" data-theme="c" data-content-theme="c" data-mini="true">
           <h3>手掌</h3>
           <ul data-role="listview" data-inset="true">
                <li data-icon="arrow-d">
                    <a><h3>未装备</h3></a>
                    <a data-theme="c">re</a>
                </li>
            </ul>
        </div>
        <div data-role="collapsible" data-theme="c" data-content-theme="c" data-mini="true">
           <h3>腰部</h3>
           <ul data-role="listview" data-inset="true">
                <li data-icon="arrow-d">
                    <a><h3>未装备</h3></a>
                    <a data-theme="c">re</a>
                </li>
            </ul>
        </div>
        <div data-role="collapsible" data-theme="c" data-content-theme="c" data-mini="true">
           <h3>腿部</h3>
           <ul data-role="listview" data-inset="true">
                <li data-icon="arrow-d">
                    <a><h3>未装备</h3></a>
                    <a data-theme="c">re</a>
                </li>
            </ul>
        </div>
        <div data-role="collapsible" data-theme="c" data-content-theme="c" data-mini="true">
           <h3>腳步</h3>
           <ul data-role="listview" data-inset="true">
                <li data-icon="arrow-d">
                    <a><h3>未装备</h3></a>
                    <a data-theme="c">re</a>
                </li>
            </ul>
        </div>
        <div data-role="collapsible" data-theme="c" data-content-theme="c" data-mini="true">
           <h3>護身符</h3>
           <ul data-role="listview" data-inset="true">
                <li data-icon="arrow-d">
                    <a><h3>未装备</h3></a>
                    <a data-theme="c">re</a>
                </li>
            </ul>
        </div>
        <div data-role="collapsible" data-theme="c" data-content-theme="c" data-mini="true">
           <h3>戒指（左）</h3>
           <ul data-role="listview" data-inset="true">
                <li data-icon="arrow-d">
                    <a><h3>未装备</h3></a>
                    <a data-theme="c">re</a>
                </li>
            </ul>
        </div>
        <div data-role="collapsible" data-theme="c" data-content-theme="c" data-mini="true">
           <h3>戒指（右）</h3>
           <ul data-role="listview" data-inset="true">
                <li data-icon="arrow-d">
                    <a><h3>未装备</h3></a>
                    <a data-theme="c">re</a>
                </li>
            </ul>
        </div>
    </div>
</div>
<!-- page : Affixes-->
<div id="pgAfx" data-role="page"  data-position="fixed">
    <!-- header -->
    <div data-role="header">
        <div class="ui-grid-b">
            <div class="ui-block-a">
                <fieldset data-role="controlgroup" data-type="horizontal">
                    <a href="#pgEqu" data-role="button" data-icon="back">返回</a>
                </fieldset>
            </div>
            <div class="ui-block-b">
                <fieldset data-role="controlgroup" data-type="horizontal">
                    <input type="radio" name="radio-choice-b" id="radio-choice-c" value="on" checked="checked" />
                    <label for="radio-choice-c">最高</label>
                    <input type="radio" name="radio-choice-b" id="radio-choice-d" value="off" />
                    <label for="radio-choice-d">全部</label>
                </fieldset>
            </div>
            <div class="ui-block-c"></div>
        </div>
    </div>
    <!-- content -->
    <div data-role="content">
            <ul data-role="listview" data-divider-theme="b" data-filter="true">
                <li data-role="list-divider">--- 傷害 ---</li>
                <li data-icon="plus"><a>
                    <p>穿刺 (LV.60)</p>
                    <p class="d3-color-blue">(10.0-35.0)% 機率引發流血，在 5 秒內造成 (825-1628)-(826-3256) 點傷害。</p>
                    <p class="ui-li-aside">前綴</p>
                </a></li>
                <li data-icon="plus"><a>
                    <p>穿刺 (LV.60)<p>
                    <span class="d3-color-blue">對精英怪的傷害提高 (3-6)%</span>
                    <p class="ui-li-aside">前綴</p>
                </a></li>
                <li data-icon="plus"><a>
                    <p>穿刺 (LV.60)<p>
                    <p class="d3-color-blue">對精英怪的傷害提高 (3-6)%</p>
                    <p class="ui-li-aside">前綴</p>
                </a></li>
                <li data-role="list-divider">--- 控場 ---</li>
                <li data-icon="plus"><a>
                    <p>穿刺 (LV.60)<p>
                    <p class="d3-color-blue">對精英怪的傷害提高 (3-6)%</p>
                    <p class="ui-li-aside">前綴</p>
                </a></li>
                <li data-icon="plus"><a>
                    <p>穿刺 (LV.60)<p>
                    <p class="d3-color-blue">對精英怪的傷害提高 (3-6)%</p>
                    <p class="ui-li-aside">前綴</p>
                </a></li>
                <li data-icon="plus"><a>
                    <p>穿刺 (LV.60)<p>
                    <p class="d3-color-blue">對精英怪的傷害提高 (3-6)%</p>
                    <p class="ui-li-aside">前綴</p>
                </a></li>
            </ul>
        </li></ul>
    </div>
</div>
</body>
</html>